<template>
    <div class="myheader">
        <div class="left"></div>
        <h2>新型冠状肺炎实时监测</h2>
        <p class="right">当前时间：{{time}}</p>
    </div>
</template>
<script setup>
import {ref,reactive,onMounted,onBeforeUnmount} from 'vue'
import dayjs from "dayjs";
const data =reactive({
    timer:0,
})
let time = ref("");
 
onMounted(() => {
  data.timer = setInterval(() => {
    //设置定时器
    getTime(); //自定义事件
  }, 1000);
});
 
onBeforeUnmount(() => {
  clearInterval(data.timer); //清除定时器
  data.timer = 0;
});
 
const getTime = () => {
  time.value = dayjs().format("YYYY年MM月DD日-HH时mm分ss秒");
};


</script>

<style lang="scss" scoped>
.myheader{
    color: #fff;
    width: 100%;
    height: 100px;
    background-image: url('@/assets/head_bg.eeff3da5.png');
    background-size: 100% 100%;
    align-items: center;
    display: flex;
    justify-content: space-around;
   .right{
    color: #ccc;
    font-size: 16px;
   }
   h2{
    font-size: 40px;
   }

}
</style>
